﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript Practice: Deep Learning</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.css" type="text/css" />
    <link rel="stylesheet" href="css/app.css" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-aria.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.js"></script>
    <script src="all.js"></script>
</head>
<body ng-app="Demo" ng-controller="Controller">
    <header>
        <md-toolbar>
            <h1 class="md-display-4 md-toolbar-tools">TypeScript Practice: Denoising Autoencoders</h1>
            <!--
            <label for="epoch">epoch: </label>
            <input id="epoch" type="number" min="1" max="1000" step="1" ng-model="epoch" />
            -->
            <div class="md-toolbar-tools">
                <label for="learning">learning rate: </label>
                <input id="learning" type="number" min="0.001" max="0.1" step="0.001"
                       ng-model="learningRate" ng-disabled="running"/>
                <label for="corrupted">corrupted rate: </label>
                <input id="corrupted" type="number" min="0.1" max="0.9" step="0.1"
                       ng-model="corruptedRate" ng-disabled="running" />
                <md-button class="md-raised" ng-click="train()" ng-model="running">{{buttonText}}</md-button>
                <md-button class="md-raised" ng-click="loadModel()" ng-disabled="running">load model</md-button>
                <md-button class="md-raised" ng-click="saveModel()" ng-disabled="running">save model</md-button>
                <md-button class="md-raised" ng-click="deleteModel()" ng-disabled="running">delete model</md-button>
            </div>
        </md-toolbar>
    </header>
    <md-content layout-padding>
        <div layout="row" layout-margin>
            <div flex="20" flex-order="1">
                <h2 class="md-headline">training data</h2>
                <pre>{{trainData.toString()}}</pre>
            </div>
            <div flex="" flex-order="2">
                <h2 class="md-headline">test data</h2>
                <pre>{{testData.toString()}}</pre>
                <h2 class="md-headline">reconstructed data</h2>
                <pre>{{reconstructed.toString(true)}}</pre>
            </div>
            <div flex="" flex-order="3">
                <h2 class="md-headline">info</h2>
                <span>{{info}}</span>
                <h2 class="md-headline">epoch</h2>
                <span>{{trainCount*epoch}}</span>
                <h2 class="md-headline">error rate</h2>
                <span>{{errorRate}}%</span>
                <div><canvas id="canvas" width="500" height="300"></canvas></div>
                <h2 class="md-headline">cost (cross entropy)</h2>
                <span>{{cost}}</span>
            </div>
        </div>
    </md-content>
</body>
</html>
